<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home/wellcome' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>用户管理</el-breadcrumb-item>
      <el-breadcrumb-item>用户列表</el-breadcrumb-item>
    </el-breadcrumb>

    <el-card class="box-card">
      <!-- 头部标签 -->
      <div slot="header" class="clearfix">
        <span><i class="el-icon-menu">操作面板</i></span>
      </div>
      <!-- 关键字搜索框 -->
      <div class="demo-input-suffix">
        <el-input placeholder="请输入商家名称" prefix-icon="el-icon-search" v-model="searchForm.keywords"
          style="width:200px; margin-right:10px;" size="small"></el-input>
        <el-button type="primary" icon="el-icon-search" size="small" @click="search">搜索</el-button>
      </div>
      <template>
        <el-table :data="tableData" stripe type="index" style="width: 100%; margin-top:8px;">
          <el-table-column type="index" width="100px" align="center"></el-table-column>
          <el-table-column prop="u_head_phone" label="用户头像">
            <template slot-scope="scope">
              <el-image :src="scope.row.u_head_phone" style="width:60px;height:60px;" fit="contain "></el-image>
            </template>
          </el-table-column>
          <el-table-column prop="u_name" label="用户名称"></el-table-column>
          <el-table-column prop="u_email" label="用户邮箱"></el-table-column>

          <el-table-column label="操作" align="center" fixed="right">
            <template slot-scope="scope">
              <el-button type="danger" size="small" icon="el-icon-delete" @click="handleClick(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
      <!-- 分页组件 -->
      <div class="page-box" style="text-align:right; margin-top:20px">
        <el-pagination background layout="prev, pager, next" :total="total" :pager-count="5" :page-size="pageSize"
          @current-change="changePage" :current-page="page"></el-pagination>
      </div>

    </el-card>
  </div>
</template>

<script>
import { getUser, delUser } from '@/http/api'
export default {
  data() {
    return {
      searchForm: {
        keywords: ''
      },
      page: 1,   // 当前页码
      pageSize: 4, // 每页显示条数
      tableData: [],  // 表格数据
      total: 0,   // 总条数
    }
  },
  methods: {
    // 获取商家列表+模糊查询
    search() {
      let params = {
        page: this.page,
        pageSize: this.pageSize,
      }
      // 校验搜索关键字
      let keywords = this.searchForm.keywords.trim()
      if (keywords && keywords.length > 0) {
        params['keywords'] = keywords
      }
      getUser(params).then(res => {
        console.log(res.data.data)
        if (res?.data?.code == 200) {
          this.page = res?.data?.data?.page
          this.pageSize = res?.data?.data?.pageSize
          this.tableData = res?.data?.data?.result
          this.total = res?.data?.data?.total
        }

      }).catch(err => {
        this.$message.error(err)
      })
    },
    // 改变页码，再次请求
    changePage(page) {
      console.log(page);
      this.page = page
      this.search()
    },
    // 删除和编辑
    handleClick(row) {
      console.log(row.u_id);
      let u_id = row.u_id

      this.$confirm('是否确认删除这条商家信息？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 删除实现
        delUser({ u_id }).then(res => {
          if (res.data.code == 200) {
            this.$message.success(res.data.msg)
            this.search()
          }
         
        })
      })

    }


  },
  created() {

  },
  mounted() {
    this.search()
  }

}
</script>

<style scoped>
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}

.box-card {
  width: 100%;
}

.el-breadcrumb {
  margin-bottom: 20px;
}
</style>